<template>
  <view>
    <view class="uni-margin-wrap">
      <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
              :duration="duration">
        <swiper-item v-for="item in navList" :key="item">
          <image class="swiper-item" mode="scaleToFill" :src="item" @error="imageError"></image>
        </swiper-item>

      </swiper>
    </view>

    <view style="width: 100%;padding: 10px;display: flex;flex-direction: row;align-items: center">
      <uni-icons type="sound" size="30" color="#3076f7"></uni-icons>
      <span style="font-size: 14px;color: #b6b8ba">台球记分助手，后续陆续推出其他功能</span>
    </view>

    <view class="game-form">


      <view @click="submit('0')" style="display: flex;flex-direction: column;align-items: center;">

        <image class="swiper-item" style="width: 60px;height: 60px;" mode="scaleToFill" src="/static/eight_ball.png" @error="imageError"></image>

        <span style="font-size: 18px;margin-top: 10px">中式8球</span>
        <span style="font-size: 14px;margin-top: 5px;color: #b6b8ba">点击开始</span>
      </view>

      <view style="display: flex;flex-direction: column;align-items: center;">
        <image class="swiper-item" style="width: 65px;height: 65px;" mode="scaleToFill" src="/static/huangjinjiu.png" @error="imageError"></image>

        <span style="font-size: 18px;margin-top: 10px">9球追分</span>
        <span style="font-size: 14px;margin-top: 5px;color: #b6b8ba">逐步开放</span>
      </view>

      <view style="display: flex;flex-direction: column;align-items: center;">
        <image class="swiper-item" style="width: 60px;height: 60px;" mode="scaleToFill" src="/static/sinuoke.png" @error="imageError"></image>
        <span style="font-size: 18px;margin-top: 10px">斯诺克</span>
        <span style="font-size: 14px;margin-top: 5px;color: #b6b8ba">逐步开放</span>
      </view>

      <!--      <uni-forms ref="form" :modelValue="formData" :rules="rules" label-width="100px" label-align="center">-->

      <!--        <uni-forms-item label="类型" name="gameType">-->
      <!--          <uni-data-select-->
      <!--              v-model="formData.gameType"-->
      <!--              :localdata="gameTypes"-->
      <!--              :clear="false"-->
      <!--              @change="gameTypeChange">-->

      <!--          </uni-data-select>-->
      <!--        </uni-forms-item>-->
      <!--      </uni-forms>-->
      <!--            <button type="primary" @click="submit">快速开始</button>-->
    </view>

    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog type="info" confirmText="去登录" title="提示" content="您需要登录才能完成此操作"
                        @confirm="dialogConfirm"
      ></uni-popup-dialog>
    </uni-popup>

  </view>
</template>

<script>
import UniFormsItem from "../../uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue";

export default {
  components: {UniFormsItem},
  data() {
    return {
      url: '',
      memberInfo: this.$store.state,
      gameTypes: [
        {value: 'eight_balls', text: "中式八球"}
      ],
      // 表单数据
      formData: {
        gameType: 'eight_balls'
      },
      rules: {
        // 对name字段进行必填验证
        name: {
          rules: [{
            required: true,
            errorMessage: '请输入姓名',
          },
            {
              minLength: 3,
              maxLength: 5,
              errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
            }
          ]
        },
        // 对email字段进行必填验证
        email: {
          rules: [{
            format: 'email',
            errorMessage: '请输入正确的邮箱地址',
          }]
        }
      },
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      navList: ["/static/bg03.png", "/static/bg01.png", "/static/bg04.png"],
    }
  },
  onLoad: function (option) {
  },
  methods: {
    dialogConfirm() {
      uni.navigateTo({
        url: '/pages/my/login/index?page=' + this.url
      });
    },
    // 触发提交表单
    submit(gameType) {
      this.url = '/pages/game/index?gameType=' + gameType
      if (this.memberInfo.memberId === undefined || this.memberInfo.memberId === '') {
        this.$refs.alertDialog.open()
      } else {
        uni.navigateTo({
          url: this.url
        });
      }


    },
    gameTypeChange(e) {
      this.formData.gameName = this.getGameNameByGameType(e)
    },
    getGameNameByGameType(e) {
      for (let item of this.gameTypes) {
        if (e === item.value) {
          return item.text + "PK赛";
        }
      }
    }
  }
}
</script>

<style lang="scss">
.uni-margin-wrap {
  width: 100%;
}

.swiper {
  height: 350rpx;
}

.swiper-item {
  width: 100%;
  display: block;
  height: 350rpx;
  line-height: 300rpx;
  text-align: center;
}

.game-form {
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
</style>
